interface SkillSelectorProps {
  selectedSkill: string;
  onSkillChange: (skill: string) => void;
  className?: string;
}

const SKILLS = [
  { value: 'storyteller', label: 'Storyteller', description: 'Create engaging stories' },
  { value: 'socratic_tutor', label: 'Socratic Tutor', description: 'Guide thinking through questions' },
  { value: 'improv', label: 'Improv', description: 'Improvised creation and performance' },
] as const;

export function SkillSelector({ selectedSkill, onSkillChange, className = '' }: SkillSelectorProps) {
  return (
    <div className={`space-y-3 ${className}`}>
      <label className="block text-sm font-medium text-gray-700">
        Select Chat Skill
      </label>
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
        {SKILLS.map((skill) => (
          <button
            key={skill.value}
            onClick={() => onSkillChange(skill.value)}
            className={`rounded-lg border p-3 text-left transition-colors ${
              selectedSkill === skill.value
                ? 'border-blue-500 bg-blue-50 text-blue-900'
                : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
            }`}
          >
            <div className="font-medium text-sm">{skill.label}</div>
            <div className="text-xs text-gray-500 mt-1">{skill.description}</div>
          </button>
        ))}
      </div>
    </div>
  );
}